import type { Report } from "@server/src/schemas/reports";
import type { Test } from "@server/src/schemas/tests";
import { Progress } from "@/components/ui/progress";
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
import { formatDate, rate } from "@/lib/utils";
import ProgressLine from "../process-line";

export function TestsSummary({ report, tests }: { report: Report; tests: Test[] }) {
  const passedRate = rate(report.summary.statistic.passed, report.summary.statistic.total);
  const done = tests.filter((test) => test.issue !== null).length;
  const unpassed = report.summary.statistic.total - report.summary.statistic.passed;
  const doneRate = rate(done, unpassed);
  return (
    <div className="grid w-full grid-cols-2 gap-4">
      <div className="grid grid-cols-2 gap-6 rounded-xl border bg-card p-4 text-card-foreground shadow-sm">
        <div className="flex flex-col justify-between">
          <div className="grid gap-1 text-xs">
            <p className="uppercase">organization name</p>
            <p className="uppercase">{report.name}</p>
            <p className="uppercase">{formatDate(report.start)}</p>
          </div>
          <div className="flex w-full flex-col gap-2">
            <span className="font-semibold">{passedRate} %</span>
            <Progress value={passedRate} className="h-4 w-full" />
          </div>
        </div>
        <div className="flex h-full flex-col overflow-hidden bg-card">
          <Table>
            <TableBody>
              <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
                <TableCell className="w-1/2 py-1.5 text-xs">Total</TableCell>
                <TableCell className="w-1/2 py-1.5 text-xs">
                  {report.summary.statistic.total}
                </TableCell>
              </TableRow>
              <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
                <TableCell className="w-1/2 py-1.5 text-xs">Passed</TableCell>
                <TableCell className="w-1/2 py-1.5 text-xs">
                  {report.summary.statistic.passed}
                </TableCell>
              </TableRow>
              <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
                <TableCell className="w-1/2 py-1.5 text-xs">Failed</TableCell>
                <TableCell className="w-1/2 py-1.5 text-xs">{unpassed}</TableCell>
              </TableRow>
              <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
                <TableCell className="w-1/2 py-1.5 text-xs">Duration</TableCell>
                <TableCell className="w-1/2 py-1.5 text-xs">
                  {Math.ceil(report.summary.time.duration / (1000 * 60))} m
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>
      </div>
      <div className="grid grid-cols-2 gap-6 rounded-xl border bg-card p-4 text-card-foreground shadow-sm">
        <div className="flex flex-col justify-between">
          <div className="grid gap-1 text-xs">
            <p>UNDO TOTAL: {unpassed}</p>
            <p>UNDO: {unpassed - done}</p>
            <p>DONE: {done}</p>
          </div>
          <div className="flex w-full flex-col gap-2">
            <span className="font-semibold">{doneRate} %</span>
            <div className="h-4">
              <ProgressLine progress={doneRate} />
            </div>
          </div>
        </div>
        <div className="overflow-hidden bg-card text-xs">
          <Table>
            <TableBody>
              <TableRow className="*:border-border [&>:not(:last-child)]:border-r">
                <TableCell className="w-1/2 py-1.5 text-xs">Bug</TableCell>
                <TableCell className="w-1/2 py-1.5 text-xs">
                  {tests.filter((test) => test.issue === "bug").length}
                </TableCell>
              </TableRow>
              <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
                <TableCell className="w-1/2 py-1.5 text-xs">Script</TableCell>
                <TableCell className="w-1/2 py-1.5 text-xs">
                  {tests.filter((test) => test.issue === "script").length}
                </TableCell>
              </TableRow>
              <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
                <TableCell className="w-1/2 py-1.5 text-xs">Env</TableCell>
                <TableCell className="w-1/2 py-1.5 text-xs">
                  {tests.filter((test) => test.issue === "env").length}
                </TableCell>
              </TableRow>
              <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
                <TableCell className="w-1/2 py-1.5 text-xs">Undo</TableCell>
                <TableCell className="w-1/2 py-1.5 text-xs">{unpassed - done}</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>
      </div>
    </div>
  );
}
